<template>
  <PageWrapper>
    <a-card :bordered="false" :title="info.title">
      <a-card-meta description="This is the description">
        <template #description>
          <!-- eslint-disable-next-line vue/no-v-html -->
          <div v-html="info.content"></div>
          <a-divider clas="w-full" />
        </template>
        <template #avatar>
          <div class="flex items-center w-full">
            <a-text depth="3"><span depth="3">发送者：</span> {{ info.sendName }}</a-text>
            <a-divider direction="vertical" />
            <a-text depth="3"><span>发送时间：</span> {{ info.sendTime }}</a-text>
            <a-divider direction="vertical" />
            <a-text depth="3"><span>类型：</span> {{ noticeTypeMsg[info.noticeType - 1] }}</a-text>
          </div>
        </template>
      </a-card-meta>

      <BasicTable
        :columns="columns"
        :request="loadDataTable"
        row-key="postId"
        ref="basicTableRef"
      />
    </a-card>
  </PageWrapper>
</template>

<script lang="ts" setup>
  import { h, ref, reactive, onMounted } from 'vue';
  import { noticeInfo, myNotice } from '@/api/notice/notice';
  import { BasicTable, BasicColumn } from '@/components/Table';
  import { useRoute } from 'vue-router';
  import { Tag } from '@arco-design/web-vue';

  const route = useRoute();
  const info = ref<any>({});
  const tableData = ref();
  const params = reactive({
    id: route.params.id,
  });

  const noticeTypeMsg = ['公告', '会议', '其他'];

  const columns: BasicColumn[] = [
    {
      title: '接收者',
      dataIndex: 'username',
    },
    {
      title: '阅读状态',
      dataIndex: 'isRead',
      render({ record }) {
        return h(
          Tag,
          {
            type: record.isRead ? 'success' : 'default',
          },
          {
            default: () => (record.isRead === 1 ? '已读' : '未读'),
          },
        );
      },
    },
    {
      title: '阅读时间',
      dataIndex: 'sendTime',
    },
  ];

  const loadDataTable = async (res) => {
    const result = await myNotice({ ...params, ...res });
    tableData.value = result.list;
    return result;
  };

  function getInfo() {
    const id = route.params && route.params.id;
    noticeInfo({ id }).then((res) => {
      info.value = res;
    });
  }

  onMounted(() => {
    getInfo();
  });
</script>
